<div>
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">选择字段</div>
            <div class="panel-body">
                <div class="field-item" :id="template.Name" :class="template.Name" v-for="template in templates" draggable="true" @dragstart="templateDrag(template)">
                    {{template.DisplayName}}
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">基本信息</div>
            <div class="panel-body">
                <div class="form-group">
                    <label class="control-label">名称</label>
                    <input type="text" class="form-control required" v-model="title">
                </div>
                <div class="form-group">
                    <label class="control-label">描述</label>
                    <textarea class="form-control" v-model="description"></textarea>
                </div>
            </div>
            <div class="panel-footer">
                <a @click="save" class="btn btn-primary">保存</a>
                <a class="btn btn-default cancel">取消</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="alert alert-warning alert-dismissible" role="alert" ng-if="Message">
            {{Message}}
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body form-display">
                <div class="row" style="min-height:200px" >
                    <div draggable="true" class="form-group clearfix" v-for="(field,index) in Fields" @click="editTemplate(field)" @drop="templateDrop($event, index, field)" @dragover='allowDrop($event)' @dragstart="dragingObject=field">
                        <component :is="field.Name" v-model="field" @remove="removeField"></component>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">字段设置</div>
            <div class="panel-body">
                <div v-if="FieldInfo">
                    <form name="fieldForm">
                        <div class="form-group">
                            <label class="control-label" for="DisplayName">名称</label>
                            <input class="form-control" type="text" id="DisplayName" name="DisplayName" v-model="FieldInfo.DisplayName" maxlength="100" />
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="Description">说明</label>
                            <textarea name="Description" id="Description" class="form-control" rows="3" cols="10" maxlength="500" v-model="FieldInfo.Description"></textarea>
                        </div>
                        <div class="form-group" v-if="FieldInfo.AdditionalSettings" v-for="setting in FieldInfo.AdditionalSettings">
                            <label class="control-label" :for="setting.Name">{{setting.DisplayText}}</label>
                            <input class="form-control" type="text" :id="setting.Name" v-model="setting.Value" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">布局</label>
                            <div>
                                <div class="btn-group">
                                    <a class="btn btn-default btn-sm" :class="{disabled:FieldInfo.Column=='col-md-12'}" @click="FieldInfo.Column='col-md-12'">整行</a>
                                    <a class="btn btn-default btn-sm" :class="{disabled:FieldInfo.Column=='col-md-4'}"  @click="FieldInfo.Column='col-md-4'">1/3行</a>
                                    <a class="btn btn-default btn-sm" :class="{disabled:FieldInfo.Column=='col-md-6'}"  @click="FieldInfo.Column='col-md-6'">1/2行</a>
                                    <a class="btn btn-default btn-sm" :class="{disabled:FieldInfo.Column=='col-md-8'}"  @click="FieldInfo.Column='col-md-8'">2/3行</a>
                                </div>
                            </div>
                        </div>
                        <component :is="'edit-'+FieldInfo.Name" v-model="FieldInfo" @addOption="addOption" @removeOption="removeOption"></component>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>